<template>
  <el-row class="navbar" style="color:#fff;background-color: #66a032;line-height: 60px;">
    <span>
      <img class="img" src="@/assets/imageSet/国研LOGO1.png">
      <span style="vertical-align:top;font-size:24px;font-weight: bold;
    font-family: 黑体;float:left">&nbsp;&nbsp;国研计量监管区块链平台</span>
    </span>
    <span style="float:right">
      <span style="font-size:16px;font-family: 幼圆">欢迎&emsp;测试员&emsp;进入系统!&emsp;</span>
      <span style="font-weight:bold;text-align:center;display:inline-block;width:8em;cursor:pointer">
        <i class="el-icon-unlock" style="font-weight:bold;font-size:18px" />&nbsp;&nbsp;修改密码
      </span>
      <span style="font-weight:bold;text-align:center;display:inline-block;width:6em;cursor:pointer" @click="offline()">
        <i class="el-icon-s-operation" style="font-weight:bold;font-size:18px" />&nbsp;&nbsp;退出
      </span>
    </span>
  </el-row>
</template>
<script>
// import Breadcrumb from '@/components/Breadcrumb/index'
// import Hamburger from '@/components/Hamburger/index'
import { logout } from '@/api/login.js'

// import store from '@/store'
export default {
  name: 'Navbar',
  data() {
    return {}
  },

  methods: {
    toggleSideBar() {
      // console.log(this.$store.getters.collapsed);
      this.$store.dispatch('toCollapse', this.$store.getters.collapsed ? 0 : 1)
    },
    // 退出
    offline() {
      logout().then(() => {
        this.$router.push('/login')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.img {
  margin-left: 10px;
  width: 100px;
  height: 30px;
  float: left;
  padding: 15px;
}

.el-dropdown {
  float: right;
  margin-right: 20px;
}

/* .el-dropdown:hover{
  background: rgb(206, 227, 248)
} */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 14px;
}

.user {
  height: 60px;
  text-align: right;
  // padding-right: 20px;
  float: right;
  margin-right: 12px;
}

.navbar /deep/ div.el-row {
  height: 60px !important;
}

.navbar /deep/ .transation {
  height: 60px !important;
}
// .slide-fade-enter-active,
// .slide-fade-leave-active {
//   transition: all 100ms ease;
// }
// .slide-fade-enter, .slide-fade-leave-to
// /* .slide-fade-leave-active for below version 2.1.8 */ {
//   transform: translateX(-220px);
//   opacity: 0;
// }
</style>
